<template>
	<el-input-number
		v-model="val"
		:disabled="disabled"
		controls-position="right"
		:min="min"
		:max="max"
		:placeholder="placeholder"
		class="width-100-percent"
		:size="size"
		:controls="controls"
		@change="onChange"
		@input="onInput"
		@blur="onBlur"
	/>

</template>
<script>
    export default {
        name: 'JkNumberInput',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            disabled: {
                type: Boolean,
                default: false
            },
            min: {
                type: Number,
                default: 0
            },
            max: {
                type: Number,
                default: 99999999999999999
            },
            placeholder: {
                type: String,
                default: ''
            },
            value: {
                type: Number,
                default: undefined
            },
            size: {
                type: String,
                default: 'medium'
            },
            controls: {
                type: Boolean,
                default: false
            },
            readonly: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                val: undefined
            };
        },
        watch: {
            value: {
                handler(newValue) {
                    this.val = newValue;
                },
                immediate: true
            }
        },
        mounted() {
            // this.val = this.value;
        },
        methods: {
            onInput(e) {
                this.$emit('input', e);
            },
            onChange(e) {
                this.$emit('change', e);
            },
            onBlur(e) {
                this.$emit('blur', e);
            }
        }

    };
</script>
